<layout name="no-slide"/>

<style type="text/css">
  template {
    display: none;
  }
  .top-list-title {
    padding: .5em 1em;
    border-bottom: 1px solid #649fe1;
    background-color: #f3f7fc;
    color: #246DBF;
  }
  .top-list-h3 {
    font-size: 1.2em;
  }
  .top-list-info {
    font-size: .8em;
    color: #999;
  }
  .top-list-item,
  .top-list-header {
    padding: .7rem 1rem;
    border-bottom: 1px solid #ddd;
  }
  .top-list-content .top-list-index {
    background: #eee;
  }
  .top-list-content .top-list-votes {
    color: #cc000b;
  }
  .top-list-index {
    margin-right: 5%;
    width: 10%;
    max-width: 3em;
    border-radius: .3em;
    text-align: center;
  }
  .top-list-name {
    width: 20%;
  }
  .top-list-sn {
    width: 40%;
    text-align: center;
  }
  .top-list-votes {
    width: 20%;
    text-align: center;
  }
  .top-list-item:nth-of-type(1) .top-list-index {
    background-color: #e46565;
    color: #fff;
  }
  .top-list-item:nth-of-type(2) .top-list-index {
    background-color: #8585f2;
    color: #fff;
  }
  .top-list-item:nth-of-type(3) .top-list-index {
    background-color: #49a949;
    color: #fff;
  }
  .goto-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    display: none;
    width: 2em;
    height: 2em;
    border: 1px solid #246DBF;
    border-left-color: transparent;
    border-bottom-color: transparent;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .see-more {
    display: block;
    text-align: center;
    line-height: 3em;
  }
</style>

<name id="top"></name>

<div class="top-list">
  <div class="top-list-title">
    <h3 class="top-list-h3">{$driverTerm['name']}投票排行榜</h3>
    <p class="top-list-info">数据截止日期：{$driverTerm['driverSnap']['end_time']?date('Y-m-d H:i:s', $driverTerm['driverSnap']['end_time']):'未发布'}</p>
  </div> 

  <p class="top-list-header">
    <span class="dib top-list-index">排行</span>
    <span class="dib top-list-name">姓名</span>
    <span class="dib top-list-sn">服务号</span>
    <span class="dib top-list-votes">票数</span>
  </p>
  <ul id="top-list-content" class="top-list-content"></ul>
</div>

<a id="goto-top" class="goto-top" href="#top"></a>

<template id="top-list-tpl">
  <li class="top-list-item">
    <span class="dib top-list-index">{{rank}}</span>
    <span class="dib top-list-name">{{name}}</span>
    <span class="dib top-list-sn">{{service_no}}</span>
    <span class="dib top-list-votes">{{vote}}</span>
  </li>
</template>

<script type="text/javascript">

  var oList = document.getElementById( "top-list-content" );
  var page = 1;
  var seeMore = document.createElement( "a" );
  seeMore.setAttribute( "class", "see-more" );
  seeMore.innerHTML = "查看更多";
  seeMore.addEventListener("click", renderHTML, false);

  function renderHTML() {
    var fm = {};
    fm.p = page;
    fm.pageSize = 20;
    fm.sid = {$sid};
    fm.term_id = {$termId};
    GH.ajax("__CONTROLLER__/getTopList", fm, function(data) {

      data = data.extra;

      if ( data.data ) {
        page++;
        var listHTML = buidHTML( data.data );
        oList.insertAdjacentHTML( "beforeend", listHTML );
      } else {
        seeMore.textContent = "没有更多了……";
        seeMore.style.color = "#999";
        seeMore.removeEventListener("click", renderHTML, false);
      };

      if ( data.totalPage > 1 ) {
        oList.appendChild( seeMore );
      };

    });
  };

  function buidHTML(data) {
    var html = "";
    var tpl = document.getElementById( "top-list-tpl" ).innerHTML;
    data.forEach(function(item, index){
      html += tpl.replace(/{{([^}}]+)?}}/g, function(s0, s1) {
                    return item[s1] || "";
                  });
    });
    return html;
  };

  renderHTML();

  var gotoTop = document.getElementById( "goto-top" );
  window.addEventListener("scroll", function() {
    var scrollTop = document.body.scrollTop;
    if ( scrollTop > 200 ) {
      gotoTop.style.display = "block";
    } else {
      gotoTop.style.display = "none";
    }
  }, false);
</script>